<!DOCTYPE html>
<html>
<head>
	<title>WebSocket 客户端</title>
	<meta charset="UTF-8">
    </head>
    <body>
        <div id="container">
            <h3>WebSocket 客户端</h3>
            <p>Heng_Xin学习使用</p>
            <input type="text" id="content" placeholder="输入你的消息..." autocomplete="off"/>
            <button id="send">发送</button>
            <p>客户端日志:</p>
            <textarea disabled id="log" rows="20" cols="50" autocomplete="off"></textarea>
        </div>
        <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
        <script>
        function log() {
            function addIndent(nSpaces) {
                var strOutput = '';
                for(var i = 0; i < nSpaces; i++) {
                    strOutput += '  ';
                }
                return strOutput; 
            }
            function parseObjToStr(oObject, nLevel) {
                if (typeof oObject !== 'string') {
                    var strOutput = "{\n";
                    nLevel = nLevel || 0;
                    for (var oEl in oObject) {
                        if (typeof oObject[oEl] === 'object'
                            || Object.prototype.toString.call(oObject[oEl]) === '[object Array]') {
                            strOutput += addIndent(nLevel) + oEl + " = ";
                            strOutput += parseObjToStr(oObject[oEl], nLevel+1) + ",\n";
                        } else {
                            var str = oObject[oEl].toString();
                            if (typeof oObject[oEl] === 'string') {
                                str = "'" + str.replaceAll("'", "\\'").replaceAll('\n', '\\n') + "'";
                            } else {
                                str = str.replaceAll('\n', '\n' + addIndent(nLevel));
                            }
                            strOutput += addIndent(nLevel) + oEl + " = " + str + ",\n";
                        }
                    }
                    strOutput += addIndent(nLevel) + "}";
                    return strOutput;
                } else {
                    return oObject;
                }
            }
            var content = "";
            for (var i = 0; i < arguments.length; i++) {
                content += parseObjToStr(arguments[i], 1) + " ";
            }
            $('#log').val($('#log').val() + content + "\n");
        }

        $(document).ready(function() {
            var ws = new WebSocket("ws://127.0.0.1:28205/");
            ws.onopen = function() {
                log("连接成功！");
            };
            ws.onmessage = function (evt) { 
                var response = evt.data;
                log("收到消息：", response);
            };
            ws.onclose = function() { 
                log("连接已关闭"); 
            };
            ws.onerror = function(err) {
                log("发生错误：", err);
            };

            $('#send').click(function() {
                var content = $('#content').val();
                log("正在发送数据", content);
                ws.send(content);
            });

        });
        </script>
    </body>
</html>